<!DOCTYPE html>
<html>

<head>
  <title>Sieve DOM</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <link rel="stylesheet" href="./toolkit/style/layout.css" type="text/css" />
  <link rel="stylesheet" href="toolkit/style/style.css" type="text/css" />

  <link rel="stylesheet" href="./../bootstrap/css/bootstrap.min.css">

  <script src="./../bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- logic related Imports -->
  <script type="module" src="toolkit/logic/GenericAtoms.mjs"></script>
  <script type="module" src="toolkit/logic/GenericElements.mjs"></script>

  <!-- TODO load sieve capabilities on demand only when needed -->

  <!-- RFC 5228 - Sieve -->
  <script type="module" src="extensions/RFC5228/logic/SieveWhiteSpaces.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveStrings.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveNumbers.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveMatchTypes.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveAddressParts.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveComparators.mjs"></script>

  <script type="module" src="extensions/RFC5228/logic/SieveBlocks.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveTests.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveOperators.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveConditions.mjs"></script>

  <script type="module" src="extensions/RFC5228/logic/SieveActions.mjs"></script>
  <script type="module" src="extensions/RFC5228/logic/SieveImports.mjs"></script>


  <!-- UI related Imports -->
  <!-- RFC 5228 - Sieve -->
  <script type="module" src="extensions/RFC5228/widgets/SieveBlocksUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveMatchTypesUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveAddressPartUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveComparatorsUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveTestsUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveOperatorsUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveConditionsUI.mjs"></script>
  <script type="module" src="extensions/RFC5228/widgets/SieveActionsUI.mjs"></script>

  <!-- RFC 5232 - ImapFlags-->
  <script type="module" src="extensions/extensions.mjs"></script>

  <style>
    .sivMenuItem {
      font-size: 0.7em;
    }

    .was-validated .form-control:valid {
      border: 1px solid #ced4da
    }

    .was-validated .form-control:focus {
      border: 1px solid #28a745
    }

    button>.sivIconMore {
      display: inline-block;
      content: "";
      background-image: url('data:image/svg+xml,<svg class="bi bi-three-dots" width="1.0em" height="1.0em" viewBox="0 0 16 16" fill="rgb(108, 117, 125)" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm5 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm5 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" clip-rule="evenodd"/></svg>');
      background-repeat: no-repeat;
      background-size: 1.0rem 1.0rem;
      background-position: center center;
      width: 1.5em;
      height: 1em;
    }

    button:hover>.sivIconMore {
      background-image: url('data:image/svg+xml,<svg class="bi bi-three-dots" width="1.0em" height="1.0em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 9.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm5 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm5 0a1.5 1.5 0 110-3 1.5 1.5 0 010 3z" clip-rule="evenodd"/></svg>');
    }

    button>.sivIconDelete {
      display: inline-block;
      content: "";
      background-image: url('data:image/svg+xml,<svg class="bi bi-trash" width="1.0em" height="1.0em" viewBox="0 0 16 16" fill="rgb(108, 117, 125)" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clip-rule="evenodd"/></svg>');
      background-repeat: no-repeat;
      background-size: 1.0rem 1.0rem;
      background-position: center center;
      width: 1.5em;
      height: 1em;
    }

    button:hover>.sivIconDelete {
      background-image: url('data:image/svg+xml,<svg class="bi bi-trash" width="1.0em" height="1.0em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/><path fill-rule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1H6a1 1 0 011-1h2a1 1 0 011 1h3.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" clip-rule="evenodd"/></svg>');
    }

    .sivIconCode {
      display: inline-block;
      content: "";
      background-image: url('data:image/svg+xml,<svg class="bi bi-code" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/></svg>');
      background-repeat: no-repeat;
      background-size: 1.3rem 1.3rem;
      background-position: center center;
      width: 1.5em;
      height: 1em;
    }

    .sivIconEdit {
      display: inline-block;
      content: "";
      background-image: url('data:image/svg+xml,<svg class="bi bi-pencil" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.293 1.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-9 9a1 1 0 01-.39.242l-3 1a1 1 0 01-1.266-1.265l1-3a1 1 0 01.242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 00.5.5H4v.5a.5.5 0 00.5.5H5v.5a.5.5 0 00.5.5H6v-1.5a.5.5 0 00-.5-.5H5v-.5a.5.5 0 00-.5-.5H3z" clip-rule="evenodd"/></svg>');
      background-repeat: no-repeat;
      background-size: 1.1rem 1.1rem;
      background-position: center center;
      width: 1.5em;
      height: 1em;
    }
  </style>
</head>

<body>
  <div class="container-xl mt-2">
    <!-- the toolvar -->
    <div id="toolbar" class="ml-2"></div>

    <div id="content">

      <!-- Infobar -->
      <div id="infobar" class="d-none alert alert-danger alert-dismissible mt-2" role="alert">
        <div>
          <strong id="infobar-subject"></strong>
          <button id="infobar-close" class="btn-close"></button>
        </div>
        <small id="infobar-brief-message" style="white-space: pre-wrap;"></small>
        <small id="infobar-message" style="white-space: pre-wrap;"></small>
      </div>

      <!-- Modal dialog -->
      <div id="sivDialog2" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header card-header d-flex justify-content-between py-0">
              <ul id="sivDialogTabs" class="nav nav-tabs card-header-tabs my-0 pt-3" role="tablist">
              </ul>
              <div class="align-self-center">
                <button type="button" class=".btn-close" data-dismiss="modal" aria-label="Close"></button>
              </div>
            </div>
            <div class="modal-body">
              <div id="sivDialogBody">
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button id="sivDialogSave" type="button" class="btn btn-primary">Apply</button>
            </div>
          </div>
        </div>
      </div>

      <div id="debug2"></div>

      <div id="divOutput" class="card p-2 pr-4">
      </div>

      <script type="module" src="SieveGui.mjs"></script>
    </div>

  </div>
</body>

</html>